/*------------------------------------*
    #CALENDAR
/*------------------------------------*

.calendar
  padding: 1px
  overflow: hidden

.calendar-dtable,
.calendar-mtable
  table-layout: fixed
  border-collapse: separate
  font-size: 12px
  width: 100%
  height: 100%
  td,
  th
    text-align: center
    font-size: 12px

.calendar-dtable
  & > tr
    background-color: lighten(#d7d7d7, 5%)

.calendar-header
  position: relative
  background-color: #d7d7d7
  padding-top: 4px
  padding-bottom: 4px

.calendar-title
  text-align: center

.calendar-text
  position: relative
  top: 2px
  +inline-block()
  padding-left: 3px
  padding-right: 3px
  font-size: 12px
  cursor: pointer
  +border-radius(2px)

.calendar-prevmonth,
.calendar-nextmonth,
.calendar-prevyear,
.calendar-nextyear
  position: absolute
  top: 50%
  padding: 3px 4px
  margin-top: -12px
  cursor: pointer
  +border-radius(2px)
  text-align: center

.calendar-prevmonth
  left: 20px
  &::before
    +font-icons(FontAwesome, '\f104', 14px, #4C4949)

.calendar-nextmonth
  right: 20px
  &::before
    +font-icons(FontAwesome, '\f105', 14px, #4C4949)

.calendar-prevyear
  left: 3px
  &::before
    +font-icons(FontAwesome, '\f100', 14px, #4C4949)

.calendar-nextyear
  right: 3px
  &::before
    +font-icons(FontAwesome, '\f101', 14px, #4C4949)

.calendar-body
  position: relative

.calendar-day
  padding: 1px
  cursor: pointer
  color: darken(#d7d7d7, 60%)
  background-color: lighten(#d7d7d7, 10%)

.calendar-other-month
  +opacity(0.3)

.calendar-disabled
  +opacity(0.6)
  cursor: default

.calendar-menu
  position: absolute
  top: 0
  left: 0
  display: none
  width: 180px
  height: 150px
  padding: 5px
  font-size: 12px
  overflow: hidden

.calendar-menu-year-inner
  text-align: center
  padding-bottom: 5px

.calendar-menu-year
  width: 40px
  text-align: center
  padding: 2px
  font-weight: 300
  font-size: 12px

.calendar-menu-prev,
.calendar-menu-next
  display: inline-block
  padding: 3px 5px
  cursor: pointer

.calendar-menu-prev
  margin-right: 10px
  &::before
    +font-icons(FontAwesome, '\f104', 14px, #4C4949)

.calendar-menu-next
  margin-left: 10px
  &::before
    +font-icons(FontAwesome, '\f105', 14px, #4C4949)

.calendar-menu-month
  text-align: center
  cursor: pointer
  font-weight: 300

.calendar-body th,
.calendar-menu-month
  color: #4d4d4d

.calendar-sunday
  color: #db1e2d

.calendar-saturday
  color: $brand-warning

.calendar-today
  border: 1px solid $brand-success

.calendar-selected
  &.calendar-today
    border-bottom: 1px solid $brand-success

.calendar-header
  border-bottom: 1px solid #D7DDE4

.calendar-body
  border-top: 1px solid #fff

.calendar-body,
.calendar-menu
  background-color: #fff

.calendar-body th
  background-color: #F4F4F4
  padding: 2px 0

.calendar-hover,
.calendar-nav-hover,
.calendar-menu-hover
  background-color: lighten(#d7d7d7, 30%)
  color: #000

.calendar-selected
  border: 1px solid darken(#d7d7d7, 20%)
